<template>
  <!-- 办事指南/执法规范/法律规则/行业新闻 -- 详情页 -->
  <view class="workDetail">
    <view class="wrapper">
      <view v-if="options.index == 1 || options.index == 3" id="wraTitle">
        <view class="title">{{ details.title || "" }}</view>
        <view class="createTime">发布时间：{{ details.createTime || "" }}</view>
      </view>

      <view
        style="overflow-y: auto"
        :style="{ height: `calc(100% - ${workText}px)` }"
      >
        <block v-if="options.index == 3 && details.coverUrl">
          <image :src="imgPrefix + details.coverUrl" class="three-img"> </image>
        </block>

        <block v-if="options.index == 2">
          <view class="name"> {{ options.articleNo }} </view>
        </block>
        <view
          class="content"
          v-if="options.index != 2"
          style="white-space: pre-wrap"
          v-html="details.content"
        >
        </view>
        <view
          class="content"
          v-else
          style="white-space: pre-wrap"
          v-html="options.articleContent"
        >
        </view>

        <view v-if="options.index == 3" class="author">
          作者:{{ details.author }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { homePageDetail } from "@/api/messages.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      options: "",
      imgPrefix: uni.getStorageSync("imgPrefix"),
      details: {},
      workText: 0,
    };
  },
  onLoad(options) {
    if (options.data) {
      this.options = JSON.parse(decodeURIComponent(options.data));
      return;
    }

    this.options = options;
    this.getDetail();
  },
  mounted() {
    if (this.options.index == 1 || this.options.index == 3) {
      setTimeout(() => {
        const query = wx.createSelectorQuery();
        query
          .select("#wraTitle")
          .boundingClientRect((data) => {
            this.workText = data.height;
          })
          .exec();
      }, 1000);
    }
  },
  methods: {
    getDetail() {
      homePageDetail({
        id: this.options.id,
        noticeType: this.options.noticeType,
      }).then((res) => {
        this.details = res.result;
      });
    },
  },
};
</script>

<style lang="scss">
.workDetail {
  height: 100%;
  background: #f6f6f6;
  overflow-y: hidden;
  padding: 16rpx 24rpx;
  .wrapper {
    padding: 34rpx 40rpx 0;
    height: 97vh;
    background: #ffffff;

    .three-img {
      width: 100%;
      height: 360rpx;
    }

    .title {
      padding-bottom: 27rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }

    .createTime {
      padding-bottom: 27rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .name {
      margin-bottom: 20rpx;
      padding-bottom: 10rpx;
      border-bottom: 1px solid #dedcdc;
      color: #333333;
      font-size: 30rpx;
      font-weight: bold;
    }

    .content {
      padding-bottom: 40rpx;
      font-size: 2r8px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
    }

    .author {
      padding: 15rpx 0;
      text-align: right;
      border-top: 1px solid #dedcdc;
      color: #bbbbbb;
      font-weight: 500;
    }
  }
}
</style>
